<style lang="less">
.head_info {
	height: 500rpx;
	// background: linear-gradient(180deg, #5ab3ff, #8ce1ff);
	background-image: url(../../static/img/task_banner.png) ;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 -100px ;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	.sign_box {
		// margin: 0 0 30rpx;
	}
	.sign_item {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background: #5ab3ff;
		border: 1px solid #fff;
		& > text {
			font-size: 20rpx;
			color: #f2f2f2;
		}
	}
	.sign_day {
		color: #f2f2f2;
		font-size: 28rpx;
		margin: 15rpx 0 15rpx;
	}
	.icon-coin {
		font-size: 30rpx;
		color: #f1f508;
	}
}
.collspse {
	.title {
		padding: 30upx 20rpx;
		border-bottom: 1upx solid #ededed;
			color: #5ab3ff;
		.icon-fly{
			font-size: 40rpx;
		}
		&>text{
			font-size: 32rpx;
			margin:  0 0 0 10rpx;
		}
	}
	.content {
		padding: 42upx 30rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26upx;
		// margin: 10rpx 0;
		.task_text {
			font-size: 28rpx;
			color: #999;
			font-weight: 500;
			letter-spacing: 1px;
			
		}
		.task_btn {
			font-size: 25rpx;
			flex-shrink: 0;
			margin: 0 0 0 20rpx;
			padding: 10upx 20upx;
			background: #5ab3ff;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 5upx;
		}
		.active{
			background: #05C256;
		}
	}
		.icon-record{
			font-size: 30rpx;
			color: #EA7C77;
		}
}
/deep/ .uni-collapse-cell--open{
	background: #fff !important;
	/deep/ &:active{
		background: #fff !important;
	}
}
/deep/ .uni-collapse-cell:active, .uni-collapse-cell--notdisabled:active{
		background: #fff !important;
}
/deep/ .uni-collapse-cell__title-text::before{
	content: '';
	display: inline-block;
	margin: 0 20rpx 0 0;
	width: 20rpx;
	height: 20rpx;
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
}
/deep/ .collspse .content{
	background: #F5F5F5 !important;
}
.is_active{
	background: #DBD9D4 !important;
	&>view{
		color: #888 !important;
		font-size: 23rpx !important;
	}
	&>text{
		color: #888 !important;
	}
}
.sign{
	height: 100%;
	overflow: auto;
}
</style>
<template>
	<view class='sign'>
		<view class="head_info">
			<view class="sign_box flex_r_around" v-if="content">
				<view class="flex_coum_center" v-for="(item) in 7" :key="item" @click="signUp(item)">
					<view :class="['sign_item', 'flex_coum_center', content['day' + item].finishTime || content['day' + item].finish ? 'is_active' : '']">
						<view class="" v-if="content['day' + item].finishTime || content['day' + item].finish">
							已领
						</view>
						<i class="iconfont icon-coin" v-else></i>
						<text>+{{getName(item)}}</text>
					</view>
					<view class="sign_day">{{ item}}天</view>
				</view>
			</view>
		</view>
		<view class="collspse" v-for="(item,index) in askList" :key='index'>
			<view class="title flex_v_venter">
				<i class="iconfont icon-fly"></i>
				<text>{{item.name}}</text>
			</view>
			<uni-collapse accordion="true">
				<uni-collapse-item v-for="(curr,i) in item.child " :showAnimation='true' :title="curr.name" :money='curr.gold'>
					<view class="content" @click="taskHandle(curr)">
						<view class="task_text">{{curr.description}}</view>
						<view class="task_btn" v-if='curr.finish === 0'>{{curr.btnText}}</view>
						<view class="task_btn active" v-if='curr.finish === 1'>已完成</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		<!-- <view class="collspse">
			<view class="title flex_v_venter">
				<i class="iconfont icon-record"></i>
				<text>日常任务</text>
			</view>
			<uni-collapse accordion="true">
				<uni-collapse-item title="好友+3元,您自己+3元" :money='100'>
					<view class="content">
						<view class="task_text">让好友填写邀请码即可</view>
						<view class="task_btn">点击查看</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view> -->
		<task-complate2 />
	</view>
</template>

<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue';
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue';
export default {
	data() {
		return {
			content:null,
			askList:null
		};
	},
	components: { uniCollapse, uniCollapseItem },
	onLoad() {
		this.$ajax('/task/dailySignList','','get').then(res => {
			// console.log(res.data.obj);
			this.content = res.data.obj
		})
		this.$ajax('/task/list','','get').then(res => {
			// console.log(res)
			this.askList = res.data.obj
			let arr = [...new Set(res.data.obj.map(item => item.type))]
			let brr = arr.map(item => {
				let dayOwn = res.data.obj.filter(val => val.type === item)
				return {
					name:item,
					child:dayOwn
				}
			})
			// console.log(brr)
			this.askList = brr
		})
	},
	methods:{
		taskHandle (task) {
			if (task.finish === 1) {
				return
			}
			switch(task.ordinal) {
				case 0: 
				case 1:
					uni.share({
						provider: 'weixin',
						scene: "WXSceneSession",
						type: 0,
						href: this.$store.state.config.shareUrl,
						title: "快来和我一起看新闻赚钱吧～",
						summary: "点击链接下载并登陆之后填写我的邀请码，马上赚钱～",
						imageUrl: this.$store.state.config.shareImgUrl || '',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						}
					})
					break
				case 2:
					uni.share({ 
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						href: this.$store.state.config.shareUrl,
						title: "快来和我一起看新闻赚钱吧～",
						summary: "点击链接下载并登陆之后填写我的邀请码，马上赚钱～",
						imageUrl: this.$store.state.config.shareImgUrl || '',
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						}
					});
					break
				case 3:
				case 4:
					uni.switchTab({
						url:`../index/index`
					})
					break
				case 5:
					uni.navigateTo({
						url:`../appIn/appIn`
					})
					break
				case 6:
					uni.navigateTo({
						url:`../me/getMoney?account=${this.$store.state.userInfo.alipayAccount}`
					})
					break
				default:
					break
			}
		},
		getName(item) {
			if(!this.content){
				return ''
			}
			return this.content['day' + item].gold
		},
		signUp(item) {
			if( this.content['day' + item].finishTime || this.content['day' + item].finish){
				uni.showToast({
					title:'您已签过到，请勿重复签到',
					icon:'none'
				})
			}else{
				this.$ajax('/task/dailySign',{day:'day'+item},'post').then(res => {
					console.log(res)
					this.content = res.data.obj.dailySignList
					this.$store.commit('setComplateTask', {gold: this.content['day' + item].gold})
				})
			}
		}
	}
};
</script>
